<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-2">
          <div class="border p-3">
            <h5 class="mb-3">科学研究</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-10">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/scientificResearch">科学研究</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">科研概况</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <!-- 科研概况内容 -->
              <p style="text-indent: 2em" v-html="overview"></p>
            </template>
            <template v-if="activeTab === 1">
              <h3 class="mb-4">科研获奖</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="container py-4">
                <div class="table-responsive">
                  <table class="table table-hover align-middle">
                    <thead class="table-light">
                      <tr>
                        <th
                          v-for="(header, index) in headers"
                          :key="index"
                          class="text-nowrap"
                        >
                          {{ header }}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in awards" :key="index">
                        <td class="fw-semibold">{{ item.id }}</td>
                        <td>{{ item.year }}</td>
                        <td>
                          <span class="d-inline-block">{{
                            item.principal
                          }}</span>
                        </td>
                        <td class="project-cell">{{ item.project }}</td>
                        <td>{{ item.awardName }}</td>
                        <td>
                          <span :class="`badge bg-${getRankClass(item.rank)}`">
                            {{ item.rank }}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div></template
            ><template v-if="activeTab === 2">
              <h3 class="mb-4">重点项目</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div v-for="(item, index) in keyProject" :key="index">
                <h4>{{ item.title }}</h4>
                <p v-for="(content, index) in item.content" :key="index">
                  {{ content.message }}
                </p>
              </div> </template
            ><template v-if="activeTab === 3">
              <h3 class="mb-4">代表论文和专利</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <h4 class="thesis-title">代表论文</h4>
              <div class="container py-4">
                <div class="list-group">
                  <div
                    v-for="(paper, index) in papers"
                    :key="index"
                    class="list-group-item border-0 shadow-sm mb-3 rounded-3"
                  >
                    <div class="d-flex align-items-start">
                      <div class="text-muted me-3 pe-2 fw-bold">
                        [{{ index + 1 }}]
                      </div>
                      <div class="flex-grow-1">
                        <div class="journal">
                          {{ paper.journal }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h4 class="thesis-title">授权专利</h4>
              <div class="container py-4">
                <div
                  v-for="(paper, index) in papers"
                  :key="index"
                  class="list-group-item border-0 shadow-sm mb-3 rounded-3"
                >
                  <div class="d-flex align-items-start">
                    <div class="text-muted me-3 pe-2 fw-bold">
                      [{{ index + 1 }}]
                    </div>
                    <div class="flex-grow-1">
                      <div class="journal">
                        {{ paper.author }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h4 class="thesis-title">软件著作权</h4>
              <div class="container py-4">
                <div v-for="(soft, index) in softwareCopyright" :key="index">
                  <div class="d-flex align-items-start">
                    <div class="text-muted me-3 pe-2 fw-bold">
                      [{{ index + 1 }}]
                    </div>
                    <div class="flex-grow-1">
                      <div class="text-muted fw-bold">
                        {{ soft.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <h4 class="thesis-title">国家标准与行业标准</h4>
              <div class="container py-4">
                <div v-for="(item, index) in standard" :key="index">
                  <div class="d-flex align-items-start">
                    <div class="text-muted me-3 pe-2 fw-bold">
                      [{{ index + 1 }}]
                    </div>
                    <div class="flex-grow-1">
                      <div class="text-muted fw-bold">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div> </template
            ><template v-if="activeTab === 4">
              <h3 class="mb-4">成果转化</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div class="container py-4">
                <div v-for="(item, index) in achievement" :key="index">
                  <div class="d-flex align-items-start">
                    <div class="text-muted me-3 pe-2 fw-bold">
                      {{ index + 1 }}.
                    </div>
                    <div class="flex-grow-1">
                      <div class="text-muted fw-bold">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const activeTab = ref(0);
const tabs = ref([
  {
    title: "科研概况",
    content: "科研概况内容",
  },
  {
    title: "科研获奖",
    content: "科研获奖内容",
  },
  {
    title: "重点项目",
    content: "重点项目内容",
  },
  {
    title: "代表论文和专利",
    content: "代表论文和专利内容",
  },
  {
    title: "成果转化",
    content: "成果转化内容",
  },
]);
// 科研概况内容
const overview = "科研概况内容";
// 科研获奖内容
// 响应式数据
const headers = reactive([
  "序号",
  "获奖年度",
  "负责人（排名）",
  "项目名称",
  "奖励名称",
  "奖励等级",
]);

const awards = reactive([
  {
    id: 1,
    year: 2023,
    principal: "胡海晓（9）",
    project: "航空复合材料关键结构件高精度纤维铺放制造关键技术及应用",
    awardName: "安徽省科学技术奖",
    rank: "一等奖",
  },
  {
    id: 2,
    year: 2022,
    principal: "刘立胜（1）",
    project: "脆性材料动态破坏行为的近场动力学理论基础",
    awardName: "武汉理工大学自然科学奖",
    rank: "二等奖",
  },
  {
    id: 3,
    year: 2022,
    principal: "胡海晓（6）",
    project: "碳纤维复合材料高精度缠绕设计与成型关键技术及应用",
    awardName: "中国复合材料学会科学技术奖",
    rank: "二等奖",
  },
  {
    id: 4,
    year: 2021,
    principal: "吕林女（8）",
    project: "严酷环境高铁相高抗蚀胶凝材料制备及其工程应用开发",
    awardName: "中国建筑材料联合会.中国硅酸盐学会建筑材料技术发明奖",
    rank: "一等奖",
  },
  {
    id: 5,
    year: 2019,
    principal: "秦莹(3)",
    project: "油泥资源全质回用技术与装备",
    awardName: "湖北省技术发明奖",
    rank: "二等奖",
  },
  {
    id: 6,
    year: 2019,
    principal: "李国栋(1)",
    project: "新材料微纳力学行为理论与设计",
    awardName: "武汉理工大学自然科学奖",
    rank: "特等奖",
  },
]);

// 奖励等级样式
const getRankClass = (rank) => {
  const map = {
    特等奖: "warning",
    一等奖: "danger",
    二等奖: "primary",
    三等奖: "success",
  };
  return map[rank] || "secondary";
};

// 重点项目内容
const keyProject = [
  {
    id: 1,
    title: "2023重点项目：",
    content: [
      {
        id: 1,
        message:
          "（1）胡海晓，大丝束碳纤维复合材料轻量化设计技术研究，湖北省科技厅尖刀技术攻关，2023BAA028-3，585万",
      },
      {
        id: 2,
        message: "（2）曹晓飞，202314JQ01，20231f0275，462万",
      },
      {
        id: 3,
        message: "（3）刘立胜，202314CX01，20231f0050，300万",
      },
    ],
  },
  {
    id: 2,
    title: "",
    content: "",
  },
];

// 代表论文和专利
const papers = reactive([
  {
    id: 1,
    journal:
      "Wang, H; Feng, X; Lu, Z; Duan, B; Yang, H; Wu, L; Zhou, L; Zhai, P; Snyder, G; Li, G *; Zhang, Q. Synergetic Enhancement of Strength-Ductility and Thermoelectric Properties of Ag2Te by Domain Boundaries[J]. Advanced Materials, 2023, 35(35): 202302969",
    author: "黄维，等.一种止水对拉螺栓（ZL202322746811.3",
  },
  {
    id: 2,
    journal:
      " Huang, X; Feng, X; An Q; Huang, B; Zhang, X; Lu, Z; Li, G *; Zhai, P; Duan, B; Snyder, G; Goddard, W; Zhang, Q. Stacking fault-induced strengthening mechanism in thermoelectric semiconductor Bi2Te3[J]. Matter, 2023,6(9): 3087-3098",
    author: "段波，等.一种高强度高塑性碲化银及其制备方法，ZL202210012220.0",
  },
]);

// 软件著作权
const softwareCopyright = reactive([
  {
    id: 1,
    name: "黄维，基于labview的热-力耦合循环加载控制系统，CA202207120001",
  },
  {
    id: 2,
    name: "赖欣，并行近场动力学通用计算软件V1.0，2018SR994319",
  },
  {
    id: 3,
    name: "赖欣，超高温陶瓷烧蚀的近场动力学热力化耦合计算软件V1.0，10315958",
  },
]);
// 国家标准与行业标准
const standard = reactive([
  {
    id: 1,
    name: "朱四荣，陈建中等. GBT 41927-2022塑料 热固性模塑料 高温下的短期性能评估",
  },
  {
    id: 2,
    name: "朱四荣，陈建中等. GB／T 41762.2-2022 纤维增强塑料复合材料 层合板厚度方向性能的测定 第2部分：弯曲试验测定碳纤维单向层合板的弹性模量、强度和威布尔尺寸效应",
  },
]);

// 成果转化
const achievement = reactive([
  {
    id: 1,
    name: "孙明清, 新型接地模块制作技术, 技术转让, 2024年，150万元",
  },
  {
    id: 2,
    name: "秦莹，一种非选择性重金属废水快速净化剂专利转让，专利转让，2018年，5万元",
  },
]);
</script>

<style scoped>
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}
p {
  font-size: 1.25rem;
}
.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 科研获奖 */

.table {
  min-width: 800px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .table {
    font-size: 0.9rem;
  }

  .project-cell {
    max-width: 300px;
    word-break: break-word;
  }

  .badge {
    font-size: 0.8em;
    padding: 0.5em 0.75em;
  }
}

/* 平板适配 */
@media (min-width: 769px) and (max-width: 992px) {
  .table {
    font-size: 0.95rem;
  }

  .project-cell {
    max-width: 400px;
  }
}

/* 桌面端样式 */
@media (min-width: 993px) {
  .table {
    font-size: 1rem;
  }

  .project-cell {
    max-width: 500px;
  }
}

/* 小标题 */
.thesis-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--site-color);
}
.list-group-item {
  transition: transform 0.2s;
  background-color: #f8f9fa;
}

.list-group-item:hover {
  transform: translateX(5px);
}

.journal {
  font-size: 0.9em;
  font-style: italic;
  color: var(--site-color);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .journal {
    font-size: 0.8em;
  }

  .list-group-item {
    margin-bottom: 1rem;
    padding: 1rem;
  }
}
@media (min-width: 993px) {
  .list-group-item {
    padding: 1.25rem;
  }
}
</style>